<template>
  <div
    v-show="visible"
    class="container"
    @click.self="close"
  >
    <div
      class="main-container"
      :style="{ width:width +'px'}"
    >
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
        style="margin-top:45px;margin-right:45px"
      >
        <el-form-item
          label="用户名"
          prop="username"
        >
          <el-input
            v-model="ruleForm.username"
            type="text"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item
          label="密码"
          prop="password"
        >
          <el-input
            v-model="ruleForm.password"
            type="password"
            autocomplete="off"
          />
        </el-form-item>
        <!-- <el-form-item
          label="确认密码"
          prop="SurePassword"
        >
          <el-input
            v-model="ruleForm.SurePassword"
            type="SurePassword"
            autocomplete="off"
          />
        </el-form-item> -->
        <el-form-item
          label="学校"
          prop="school"
        >
          <el-input v-model.number="ruleForm.school" />
        </el-form-item>

        <el-form-item
          label="昵称"
          prop="nickname"
        >
          <el-input v-model.number="ruleForm.nickname" />
        </el-form-item>
        <el-form-item
          label="年龄"
          prop="age"
        >
          <el-input v-model.number="ruleForm.age" />
        </el-form-item>

        <el-form-item
          label="性别"
        >
          <el-select v-model="ruleForm.sex">
            <el-option value="1">
              男
            </el-option>
            <el-option value="0">
              女
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            style="margin-right:50px"
            @click="submitForm('ruleForm')"
          >
            注册
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex';
import _ from 'lodash';
// eslint-disable-next-line import/no-cycle
import { userRegist } from '@/api/user';

export default {
  props: {
    width: {
      type: Number,
      default: () => 500,
    },
    visible: {
      type: Boolean,
      default: () => false,
    },
  },
  data() {
    // ? 如果错了 callback(new Error(xxxx)),
    // ? 如果通过, callback()
    const validateUsername = (rule, value, callback) => {
      const reg = /^[\u4e00-\u9fa5a-zA-Z]{6,}$/;
      if (!reg.test(value)) {
        callback(new Error('只能输入中英文'));
      } else {
        callback();
      }
    };
    // eslint-disable-next-line consistent-return
    // const validateSurePassword = (rule, value, callback) => {
    //   if (value !== '') {
    //     if (value.length < 6) {
    //       callback(new Error('请输入至少6位确认密码'));
    //       return false;
    //     } if (value !== this.ruleForm.password) {
    //       callback(new Error('两次输入的新密码不一致'));
    //       return false;
    //     }
    //     callback();
    //   }
    // };
    // const validatePassword = (rule, value, callback) => {
    //   const rag = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;
    //   if (!rag.test(value)) {
    //     callback(new Error('要求为至少6位，至少1个大写字母，1个小写字母，1个数字，1个特殊符号。'));
    //   } else {
    //     callback();
    //   }
    // };

    return {
      ruleForm: {
        username: '',
        password: '',
        // SurePassword: '',
        school: '',
        nickname: '',
        age: '',
        sex: '',
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 6, message: '长度在6位以上', trigger: 'blur' },
          { validator: validateUsername, trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 6, message: '长度在6位以上', trigger: 'blur' },
          // { validator: validatePassword, trigger: 'blur' },
        ],
        // SurePassword: [
        //   { required: true, message: '请输入确认密码', trigger: 'blur' },
        //   { min: 6, message: '长度在6位以上', trigger: 'blur' },
        //   { validator: validateSurePassword, trigger: 'blur' },
        // ],
      },
    };
  },
  methods: {
    ...mapMutations(['showLoading', 'hideLoading']),
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // * 注册请求
          await this.regist();
        }
        return false;
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // * 用户注册
    async regist() {
      try {
        this.showLoading();
        await userRegist({
          ..._.omit(this.ruleForm, 'sex'),
          gender: this.ruleForm.sex,
        });
        // this.$router.push('/login');
      } catch (error) {
        this.$message.error(error.message);
      } finally {
        this.hideLoading();
        this.$emit('update:visible', false);
      }
    },
    close() {
      this.$emit('update:visible', false);
    },
  },
};
</script>

<style scoped>
.container{
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  /* background-color: black; */
  background-color: rgba(105, 105, 105, 0.3);
}
.main-container{
  height: 500px;
  width: 500px;
  background-color: rgb(255, 255, 255);
  border: 1px solid rgb(208, 208, 208);
  box-shadow: 2px 2px 8px 2px #abaaaa;
}
</style>
